<template>
    <div>
<!--        左树右表-->
        <div id="leftT_rightB">
            <div class="tab tab_on">
                <span class="tab_on_left tab_left"><i class="tab_on_left el-icon-goods"></i>商品列表</span>
                <button class="tab_right tab_on_right" @click="rouBack"><i class="big el-icon-arrow-left"></i>返回</button>
                <button class="tab_right tab_on_right" @click="Refresh"><i class="big el-icon-refresh-left"></i>刷新</button>
            </div>
            <div class="tab">
                <span class="tab_left">筛选查询</span>
                <button @click="Advancedretrievalshow =!Advancedretrievalshow" class="tab_right">高级检索</button>
            </div>

            <div class="tab_two">
<!--                商品模糊查的框-->
                <el-form
                        :inline="true"
                        :model="this.formInline"
                        class="demo-form-inline"
                        label-width="80px"
                        @keyup.enter.native="likeData"
                        @submit.native.prevent
                        size="mini">
                    <el-form-item label="输入搜索:">
                        <el-input @keyup.enter.native="likeData"  class="tab_two_like" v-model="formInline.proname" placeholder="商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="商品分类:">
                        <el-select @keyup.enter.native="likeData" @click.enter.native="classifydate"  class="tab_two_like" v-model="formInline.classification" placeholder="请选择商品分类">
                            <el-option label="暂不选择" value=""></el-option>
                            <el-option v-for="(menu,index) in TreeData2"  :label="menu.label" :value="menu.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品状态:">
                        <el-select @keyup.enter.native="likeData"  class="tab_two_like" v-model="formInline.label" placeholder="上架/下架">
                            <el-option label="暂不选择" value=""></el-option>
                            <el-option label="已删除" value="0"></el-option>
                            <el-option label="上架" value="1"></el-option>
                            <el-option label="下架" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品标签:">
                        <el-select @keyup.enter.native="likeData"  class="tab_two_like" v-model="formInline.state" placeholder="">
                            <el-option label="暂不选择" value=""></el-option>
                            <el-option label="书" value="书"></el-option>
                            <el-option label="IT" value="IT"></el-option>
                            <el-option label="用品" value="用品"></el-option>
                            <el-option label="服装" value="服装"></el-option>
                            <el-option label="饮料" value="饮料"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="content">
                <div id="Tree" >
                    <el-tree style="background-color:#F9F9F9" @node-click="getTreeID"
                            :data="Treedata"
                            node-key="id"
                            :default-expand-all="true"
                            :default-checked-keys="[]">
                    </el-tree>
                </div>
                <div id="Tab">
                    <div class="tab">
                        <span class="tab_left"><i class="Icon el-icon-s-grid"></i> 数据列表</span>
                        <button class="tab_right"> <router-link to="AddCommodity">添加商品</router-link></button>
                        <button class="tab_right tab_center_right">导入</button>
                    </div>
                    <!-- 表格 -->
                    <el-table  border :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
                        <el-table-column
                                align="center"
                                type="selection"
                                width="56">
                        </el-table-column>
                    <!-- 对应字段写好-->
                        <el-table-column align="center" prop="productCode" sortable label="编号" width="86">
                        </el-table-column>
                        <el-table-column align="center" prop="mainImage" label="商品图片" width="140">
                            <template slot-scope="scope">
                                <img :src="scope.row.mainImage" style="height: 50px"/>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="productName" label="商品名称" width="100">
                        </el-table-column>
                        <el-table-column align="center" prop="currentpriceProduct" sortable label="价格" width="86">
                        </el-table-column>
                        <el-table-column align="center" prop="productSate" label="状态" width="100">
                            <template slot-scope="scope">
                                <el-switch
                                        v-model="scope.row.productSate"
                                        active-color="#1ABC9C"
                                        inactive-color=""
                                        @change="changeVal(scope.row,scope.$index,scope.row.productSate,scope.row.result)"
                                        :active-value="1"
                                        :inactive-value="2">
                                </el-switch>
                                </template>
                        </el-table-column>
                        <el-table-column align="center" prop="searchKeywords" label="标签" width="120">
                        </el-table-column>
                        <el-table-column align="center" prop="searchKeywords" label="分类" width="120">
                        </el-table-column>
                        <el-table-column align="center" prop="hits" label="销量" sortable width="150">
                        </el-table-column>
                        <el-table-column align="center" prop="result" label="审核状态" width="120">
                            <template slot-scope="scope">
                                <div v-text="scope.row.result"></div>
                                <span @click="resultShow(scope.row,scope.row.productId)" class="result_class">审核详情</span>
                            </template>

                        </el-table-column>
                        <el-table-column align="center" prop="" label="操作" width="130">
                            <template slot-scope="scope">
                                <div class="operation">
                                    <span @click="ViewdetailsShow(scope.row,scope.row.productId)" class="result_class">查看</span>
                                    <span @click="UpdateViewdetails(scope.row,scope.$index)" class="result_class">编辑</span>
                                </div>
                                <div class="operation">
                                    <router-link :to="{name:'productlog',params:{product:scope.row.productId}}" class="result_class">日志</router-link>
                                    <span @click="DeleteViewdetails(scope.$index,scope.row.productId)" class="result_class">删除</span>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页器 -->
                    <div class="block">
                        <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                       :current-page="currentPage"
                                       :page-sizes="[1,5,10,20]"
                                       :page-size="pageSize"
                                       layout="total, sizes, prev, pager, next, jumper"
                                       :total="tableData.length">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
<!--        审核详情页面-->
        <transition name="el-fade-in-linear">
            <div class="result_show" v-if="show">
                <div class="border_show">
                    <div class="result_show_top"><span class="result_show_top_left">审核详情</span><span @click="show = false" class="result_show_top_right">×</span></div>
                    <div class="result_show_top_tab">
                        <el-table  border :data="tableData5" style="width: 100%">
                            <!-- 对应字段写好-->
                            <el-table-column align="center" prop="implementDater" sortable label="审核时间" width="130">
                            </el-table-column>
                            <el-table-column align="center" prop="implementId" label="审核人员" width="110">
                            </el-table-column>
                            <el-table-column align="center" prop="result" label="审核结果" width="120">
                            </el-table-column>
                            <el-table-column align="center" prop="remarks" label="反馈详情" width="200">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </transition>
<!--        查看商品详情页面-->
        <transition name="el-fade-in-linear">
            <div class="View_details" v-if="Viewdetailsshow">
                <div class="View_details_top"><span>商品详情</span><span class="back" @click="Viewdetailsshow = false">×</span></div>
                <el-form v-for="(viewData,index) in tableData2" :key="viewData.productId" :inline="true" class="demo-form-inline">
                    <el-form-item size="mini" class="View_details_content" label="商品编号：">
                        <el-input v-text="viewData.productCode"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="商品名称：">
                        <el-input v-text="viewData.productName"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="商品价格：">
                        <el-input v-text="viewData.currentpriceProduct"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="商品状态：">
                        <el-input v-text="viewData.result"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="商品分类：">
                        <el-input v-text="viewData.title"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content2" label="商品销量：">
                        <el-input v-text="viewData.hits"></el-input>
                    </el-form-item>
                    <div class="look">
                        <el-form-item  class="View_details_content" label="商品标签：">
                            <el-input v-text="viewData.searchKeywords" type="textarea"></el-input>
                        </el-form-item>
                    </div>
                    <div class="View_details_content_commodity">
                    <el-form-item  class="View_details_content1" label="商品介绍：">
                        <el-input v-text="viewData.productDescription" type="textarea"></el-input>
                    </el-form-item>
                    </div>
                </el-form>
            </div>
        </transition>
        <!--        修改商品信息-->
        <transition name="el-fade-in-linear">
            <div class="upDate_View_details" v-if="UpdateViewdetailsshow">
                <div class="View_details_top"><span>修改商品信息</span><span class="back" @click="UpdateViewdetailsshow = false">×</span></div>
                <el-form  :model="UpdateVdeta" :inline="true" class="demo-form-inline">
                    <el-form-item size="mini" class="View_details_content" label="商品编号：">
                        <el-input v-model="UpdateVdeta.productCode"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="商品名称：">
                        <el-input  v-model="UpdateVdeta.productName"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="商品价格：">
                        <el-input v-model="UpdateVdeta.currentpriceProduct"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="商品状态：">
                        <el-input v-model="UpdateVdeta.result"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="商品分类：">
                        <el-select  @click.enter.native="classifydate" v-model="UpdateVdeta.title">
                            <el-option label="暂不选择" value=""></el-option>
                            <el-option v-for="(menu,index) in TreeData2"  :label="menu.label" :value="menu.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content2" label="商品销量：">
                        <el-input v-model="UpdateVdeta.hits"></el-input>
                    </el-form-item>
                    <el-form-item  class="View_details_content" label="商品标签：">
                        <el-input v-model="UpdateVdeta.searchKeywords" type="textarea"></el-input>
                    </el-form-item>
                    <div class="View_details_content_commodity">
                        <el-form-item  class="View_details_content1" label="商品介绍：">
                            <el-input v-model="UpdateVdeta.productDescription" type="textarea"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
                <div class="View_details_bottom">
                    <div class="View_details_bottom_position">
                        <button @click="cancelModification" class="View_details_bottom_no">取消</button>
                        <button @click="confirmModification" class="View_details_bottom_yes">确定</button>
                    </div>
                </div>
            </div>
        </transition>
        <!--        高级检索-->
        <transition name="el-fade-in-linear">
            <div class="upDate_View_details" v-if="Advancedretrievalshow">
                <div class="View_details_top"><span>高级检索</span><span class="back" @click="Advancedretrievalshow = false">×</span></div>
                <el-form
                        :inline="true"
                        :model="this.formInline"
                        class="demo-form-inline"
                        label-width="80px"
                        @keyup.enter.native="likeData"
                        @submit.native.prevent
                      >
                    <el-form-item class="Advanced_retrieval" label="输入搜索:">
                        <el-input @keyup.enter.native="likeData"  class="tab_two_like" v-model="formInline.proname" placeholder="商品名称"></el-input>
                    </el-form-item>
                    <el-form-item class="Advanced_retrieval" label="商品分类:">
                        <el-select @keyup.enter.native="likeData" @click.enter.native="classifydate"  class="tab_two_like" v-model="formInline.classification" placeholder="请选择商品分类">
                            <el-option label="暂不选择" value=""></el-option>
                            <el-option v-for="(menu,index) in TreeData2"  :label="menu.label" :value="menu.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="Advanced_retrieval" label="商品状态:">
                        <el-select @keyup.enter.native="likeData"  class="tab_two_like" v-model="formInline.label" placeholder="上架/下架">
                            <el-option label="暂不选择" value=""></el-option>
                            <el-option label="已删除" value="0"></el-option>
                            <el-option label="上架" value="1"></el-option>
                            <el-option label="下架" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="Advanced_retrieval" label="商品标签:">
                        <el-select @keyup.enter.native="likeData"  class="tab_two_like" v-model="formInline.state" placeholder="">
                            <el-option label="暂不选择" value=""></el-option>
                            <el-option label="书" value="书"></el-option>
                            <el-option label="IT" value="IT"></el-option>
                            <el-option label="用品" value="用品"></el-option>
                            <el-option label="服装" value="服装"></el-option>
                            <el-option label="饮料" value="饮料"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="Advanced_retrieval" label="商品价格:">
                        <el-input @keyup.enter.native="likeData"  class="tab_two_like" v-model="formInline.Price" placeholder="请输入价格"></el-input>
                    </el-form-item>
                    <el-form-item class="Advanced_retrieval" label="审核状态:">
                        <el-select @keyup.enter.native="likeData"  class="tab_two_like" v-model="formInline.Auditstatus" placeholder="">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="已通过" value="已通过"></el-option>
                            <el-option label="待审核" value="待审核"></el-option>
                            <el-option label="未通过" value="未通过"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="View_details_bottom">
                    <div class="View_details_bottom_position">
                        <button @click="Advanced_retrieval_no" class="View_details_bottom_no">取消</button>
                        <button @click="likeData" class="View_details_bottom_yes">确定</button>
                    </div>
                </div>
            </div>
        </transition>
    </div>

</template>

<script>

    export default {
        inject:['reload'],
        data() {
            return {
                //表格数据
                tableData: [],//可能会有变动
                tableData2:[],//过度数据用的
                tableData3:[],//不会变的所有商品数据
                //下拉框数据
                TreeData2:[],
                TreeData3:[],//不会变动的数据
                //审核详情表格数据
                tableData4:[],
                tableData5:[],
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 5 ,// 每页的数据条数
                Treedata: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                //模糊查用
                formInline: {
                    proname: '',
                    classification: '',
                    label:'',
                    state:'',
                    Price:'',
                    Auditstatus:''
                },
                //修改商品信息用
                UpdateVdeta: {},
                UpdateVdeta2: {},
                show:false,
                Viewdetailsshow:false,
                UpdateViewdetailsshow:false,
                Advancedretrievalshow:false,
                ind:0,
                //操作日志的字段
                newresult:''
            };
        },

        methods: {
            //创建一个方法传入后台数据(树Tree)
            treedate(categrpuyId){
                this.$http.get("/getPriductTree",{
                    params:{
                        cateId:categrpuyId
                    }
                }).then(res => {
                    this.Treedata = res.data;
                });
            },
            //创建一个方法传入后台数据(表Table)
            tabledate(){
                this.$http.get("/pagepro",{
                }).then(res => {
                    this.tableData = res.data;
                    this.tableData3 = res.data;
                });
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                this.currentPage = val;
                console.log("++++"+val)
            },
            //点击树 出现对应列表的数据
            getTreeID(data){
                this.tableData = this.tableData3;
                this.tableData2 = [];
                for (let i = 0; i<this.tableData.length;i++){
                    if(this.tableData[i].categroyId === data.id){
                        this.tableData2.push(this.tableData[i])
                    }
                }
                this.tableData = this.tableData2
            },
            //模糊查数据
            classifyTreedate(){
                this.$http.get("/getPriductTree").then(res => {
                    this.TreeData3 = res.data;
                });
            },
            likeData(){
                this.currentPage = 1;
                this.$http.get("/pagepro",{
                    params:{
                        productName:this.formInline.proname,
                        categroyId:this.formInline.classification,
                        productSate:this.formInline.label,
                        searchKeywords:this.formInline.state,
                        result:this.formInline.Auditstatus,
                        currentpriceProduct:this.formInline.Price
                    }
                }).then(res => {
                    this.tableData = res.data;
                });
                this.Advancedretrievalshow = false;
            },
            //从后台获取下拉框数据
            classifydate(){
                this.TreeData2 = [];
                this.getTreeData(this.TreeData3)
            },
            //获取分类最底层
            getTreeData(data) {
                // 循环遍历json数据
                for (var i = 0; i < data.length; i++) {
                    if (data[i].children.length < 1) {
                        // children若为空数组，则将children设为undefined
                        this.TreeData2.push(data[i])
                    } else {
                        // children若不为空数组，则继续 递归调用 本方法
                        this.getTreeData(data[i].children);
                    }
                }
            },
            //刷新页面
            Refresh(){
                this.reload();
            },
            //返回上一页
            rouBack(){
                this.$router.back()
            },
            //上架下架
            changeVal(row,index,val,state){
                //判断审核状态，已通过才可以操作
                if(state == "已通过"){
                    this.$http.get("/updatepagepro",{
                        params:{
                            productId:row.productId,
                            productSate:val
                        }
                    }).then(res => {
                        //判断是否添加成功
                        if (res.data == 1){
                            // console.log(new Date())
                            if(row.productSate == 1){
                                this.newresult = "上架"
                            }else if(row.productSate == 2){
                                this.newresult = "下架"
                            }
                            this.$http.get("/addCommodity",{
                                params:{
                                    logbookProductCode:row.productCode,
                                    logbookProductName:row.productName,
                                    logbookOrignalpriceProduct:row.originalpriceProduct,
                                    logbookCurrentpriceProduct:row.currentpriceProduct,
                                    logbookProductSate:this.newresult,
                                    logbookResult:row.result,
                                    logbookUpdateUser:"先随便来一个",
                                }
                            }).then(res => {

                            });
                        } else {
                            this.$http.get("/addCommodity",{
                                params:{
                                    logbookProductCode:0,
                                    logbookProductName:"操作异常",
                                    logbookOrignalpriceProduct:0,
                                    logbookCurrentpriceProduct:0,
                                    logbookProductSate:"操作异常",
                                    logbookResult:"操作异常",
                                    logbookUpdateUser:"操作异常",
                                }
                            }).then(res => {

                            });
                        }
                    });
                }else if(state == "未通过"){
                    row.productSate = 2;
                    alert("此商品还未通过审评，请稍后再尝试哦～～")
                }else if(state == "待审核"){
                    row.productSate = 2;
                    alert("此商品还未通过审评，请稍后再尝试哦～～")
                }
            },
            //审核评论
            resultData(){
                this.$http.get("/pageprorust",{
                }).then(res => {
                    this.tableData4 = res.data;
                });
            },
            //审核评论弹出层数据表格
            resultShow(row,id){
                this.tableData5=[];
                for (let i = 0; i<this.tableData4.length;i++){
                    if(this.tableData4[i].productId == id){
                        this.tableData5.push(this.tableData4[i])
                    }
                }
                this.show = !this.show
            },
        //    查看商品详情
            ViewdetailsShow(row,id){
                this.tableData2=[];
                for (let i = 0; i<this.tableData3.length;i++){
                    if(this.tableData3[i].productId == id){
                        this.tableData2.push(this.tableData3[i])
                    }
                }
                this.Viewdetailsshow = !this.Viewdetailsshow
            },
            //    修改商品信息
            UpdateViewdetails(row,index){
                this.ind = index;
                this.UpdateVdeta2 = JSON.parse( JSON.stringify(row));
                this.UpdateVdeta=this.UpdateVdeta2;
                this.UpdateViewdetailsshow = !this.UpdateViewdetailsshow
            },
            cancelModification(){
                this.UpdateViewdetailsshow = !this.UpdateViewdetailsshow
            },
            confirmModification(){
                this.$http.get("/updatepagepro",{
                    params: this.UpdateVdeta
                }).then(res => {
                    console.log(res.data)
                    //判断是否添加成功
                    if (res.data == 1){
                        // console.log(new Date())
                        if(this.UpdateVdeta.productSate == 1){
                            this.newresult = "上架"
                        }else if(this.UpdateVdeta.productSate == 2){
                            this.newresult = "下架"
                        }
                        this.$http.get("/addCommodity",{
                            params:{
                                logbookProductCode:this.UpdateVdeta.productCode,
                                logbookProductName:this.UpdateVdeta.productName,
                                logbookOrignalpriceProduct:this.UpdateVdeta.originalpriceProduct,
                                logbookCurrentpriceProduct:this.UpdateVdeta.currentpriceProduct,
                                logbookProductSate:this.newresult,
                                logbookResult:this.UpdateVdeta.result,
                                logbookUpdateUser:"先随便来一个",
                            }
                        }).then(res => {

                        });
                    } else {
                        this.$http.get("/addCommodity",{
                            params:{
                                logbookProductCode:0,
                                logbookProductName:"操作异常",
                                logbookOrignalpriceProduct:0,
                                logbookCurrentpriceProduct:0,
                                logbookProductSate:"操作异常",
                                logbookResult:"操作异常",
                                logbookUpdateUser:"操作异常",
                            }
                        }).then(res => {

                        });
                    }
                });
                this.$message ( {
                    duration:1000,
                    type: "success" ,
                    message:"修改成功!"
                });
                this.UpdateViewdetailsshow = !this.UpdateViewdetailsshow
            },
            //删除商品
            DeleteViewdetails(index,id){
                this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.tableData = this.tableData3;
                    for (let i = 0; i<this.tableData3.length;i++){
                        if(this.tableData3[i].productId == id){
                            this.tableData.splice(i,1);
                        }
                    }
                    this.$http.get("/deletepagepro",{
                        params:{
                            id:id
                        }
                    });
                    this.$message({
                        duration:1000,
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        duration:1000,
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        // 高级检索
            Advanced_retrieval_no(){
                this.formInline.proname = '',
                this.formInline.classification = '',
                this.formInline.label = '',
                this.formInline.state = '',
                this.formInline.Auditstatus = '',
                this.formInline.Price = '',
                this.Advancedretrievalshow = false;
            }
        },
        //侦听器
        watch: {

            },
        //先调用一下传入数据的方法
        created(){
            this.tabledate();
            this.treedate();
            this.resultData();
            this.classifyTreedate();
        }
    };



</script>
<style>
    a{
        text-decoration:none;
    }
    #Tab{
        margin: 0px 0px 0px 0px;
        float: right;
    }
    #Tree{
        float: left;
        width: 217px;
    }
    #leftT_rightB{
        margin: 0px 0px 0px 0px;
        width: 1430px;
    }
    /*头*/
    .tab_on{
        margin: -20px 0px 12px -20px;
        padding: 0px 10px 4px 0px;
    }
    .tab_left{
        margin: 0px 0px 0px 9px;
        font-size: 13px;
    }
    .tab_on_left{
        color: #A2A2A2;
        font-size: 15px;
    }
    .tab{
        height: 42px;
        background: #F3F3F3;
        border: 1px #E4E4E4 solid;
        line-height: 2.5;
    }

    .tab_right{
        margin: 10px 15px 0px 0px;
        padding: 4px 13px;
        float: right;
        font-size: 12px;
        background: white;
        border: 2px #D8D8D8 solid;
    }
    .tab_on_right{
        padding: 4px 17px;
        font-size: 12px;
        color: #9A9A9A;
    }
    .big{
        font-size: 13px;
        padding: 0px 5px 0px 0px;
        font-weight: 900;
    }
    /*背景色*/
    body{
        background: #F9F9F9;
    }
    /*模糊查*/
    .tab_two{
        height: 42px;
        background: #FFFFFF;
        border: 1px #E4E4E4 solid;
        line-height: 2.5;
        margin-top: 3px;
    }
    .tab_two_like{
        margin: 8px 0px 0px 0px;
        width: 163px;
    }
    .el-input__inner {
        border-radius: 2px;
        border: 1px solid #DCDFE6;
    }
/*    内容*/
    .content{
        margin-top: 14px;
    }
    .Icon{
        font-size: 21px;
        color: #5F615F;
    }
    .tab_center_right{
        padding: 4px 27px;
    }
/*    Tree样式*/
    .block{
        margin: 0px 0px 0px 0px;
        padding: 6px 0px 8px 0px;
        background-color: #FFFFFF;
        border: 1px #EBEEF5 solid;
    }
/*    审核状态*/
    .result_class{
        cursor:pointer;
        color: #13BB9B;
        margin: 0px 4px 0px 4px;
        font-size: 10px;
    }
    .result_show{
        position: relative;
        margin: 118px 230px 0px 593px;
    }
    .result_show_top {
        background-color: #FFFFFF;
        width: 612px;
        height: 373px;
        position: absolute;
    }
    .result_show_top_left{
        background-color: #F2F2F2;
        margin: 0px 0px 0px 0px;
        padding: 18px 471px 14px 25px;
        color: #666666;
        font-weight: 600;
    }
    .result_show_top_tab{
        margin: 55px 0px 0px 26px;
        position: absolute;
    }
    .border_show{
        width: 612px;
        height: 373px;
        box-shadow: 0px 4px 26px -8px;
    }
    .result_show_top_right{
        cursor: pointer;
        line-height: 50px;
        font-size: 27px;
        color: #666666;
        padding: 6px 31px 11px 0px;
        background: #F2F2F2;
        font-weight: 600;
    }
/*操作中的四个按钮*/
    .operation{
        margin: 1px 0px 4px 0px;
    }
/*    查看详情*/
    .View_details{
        background: #FFFFFF;
        width: 700px;
        z-index: 5;
        top: 257px;
        left: 847px;
        height: 431px;
        position: absolute;
        box-shadow: 0px 4px 26px -8px;
    }
    .View_details_top{
        background-color: #F2F2F2;
        width: 700px;
        height: 50px;
    }
    .View_details_top>span{
        line-height: 50px;
        padding: 0px 0px 0px 25px;
        color: #666666;
        font-weight: 600;
    }
    .View_details_content{
        margin-left: 63px;
        margin-bottom: 48px;
        margin-top: 18px;
    }
    .View_details_content1{
         margin-left: 63px;
         margin-bottom: 20px;
         margin-top: 49px;
    }
    .View_details_content2{
        margin-left: 49px;
        margin-bottom: 48px;
        margin-top: 18px;
    }
    .View_details_content_commodity{
        margin: -44px 0px 0px 0px;
    }
    .el-textarea__inner {
        display: block;
        resize: vertical;
        padding: 5px 15px;
        line-height: 1.5;
        box-sizing: border-box;
        width: 256%;
        font-size: inherit;
        color: #606266;
        background-color: #FFF;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    }
    .back{
        cursor: pointer;
        margin: 0px 17px 0px 0px;
        float: right;
        font-size: 34px;
    }
/*    修改商品信息*/
    .upDate_View_details{
        background: #FFFFFF;
        width: 700px;
        z-index: 5;
        top: 257px;
        left: 847px;
        height: 518px;
        position: absolute;
        box-shadow: 0px 4px 26px -8px;
    }
    .View_details_bottom{
        border-top: 1.5px #E4E4E4 solid;
    }
    .View_details_bottom_position{
        margin: 18px 0px 0px 258px;
    }
    .View_details_bottom_no {
        background: #FFFFFF;
        height: 34px;
        color: #32BC9C;
        width: 78px;
        border: 1px #CCCCCC solid;
        border-radius: 6%;
    }
    .View_details_bottom_yes{
        margin: 0px 0px 0px 20px;
        background: #32BC9C;
        height: 34px;
        color: #FFFFFF;
        width: 78px;
        border: 1px #32BC9C solid;
        border-radius: 6%;
    }
/*    高级检索*/
    .Advanced_retrieval{
        margin: 40px 0px 43px 66px;
    }
/*    查看弹出层*/

</style>